<template>
  <div class="body">
    <div class="header">
      <div class="icon-group">
        <span class="iconfont">&#xe7d8;</span>
        <div class="icon-group-child">
          <el-row>
            <el-col class="icon-one" :span="8" >
              <div @click="addModule">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-bingtu"></use>
                </svg>
                <div class="icon-title">饼图</div>
              </div>
            </el-col>
            <el-col class="icon-one" :span="8">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zhexian"></use>
              </svg>
              <div class="icon-title">折线图</div>
            </el-col>
            <el-col class="icon-one" :span="8">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-duijizhutu"></use>
              </svg>
              <div class="icon-title">柱状图</div>
            </el-col>
            <el-col class="icon-one" :span="8">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-qipaotu"></use>
              </svg>
              <div class="icon-title">气泡图</div>
            </el-col>
            <el-col class="icon-one" :span="8">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-yibiaopan1"></use>
              </svg>
              <div class="icon-title">仪表盘</div>
            </el-col>
            <el-col class="icon-one" :span="8">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-leidatu1"></use>
              </svg>
              <div class="icon-title">雷达图</div>
            </el-col>
            <el-col class="icon-one" :span="8">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-ciyuntu1"></use>
              </svg>
              <div class="icon-title">词云图</div>
            </el-col>
            <el-col class="icon-one" :span="8">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-lixianditu"></use>
              </svg>
              <div class="icon-title">地图</div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="icon-group">
        <span class="iconfont">&#xe651;</span>
        <div class="icon-group-child">
          <el-row>
            <el-col class="icon-one" :span="8" >
              <div>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-ic_wenbenkuang"></use>
                </svg>
                <div class="icon-title">文本框</div>
              </div>
            </el-col>
            <el-col class="icon-one" :span="8">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-paomadengicon"></use>
              </svg>
              <div class="icon-title">跑马灯</div>
            </el-col>
            <el-col class="icon-one" :span="8">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zu"></use>
              </svg>
              <div class="icon-title">超链接</div>
            </el-col>
            <el-col class="icon-one" :span="8">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shijian2"></use>
              </svg>
              <div class="icon-title">实时时间</div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="icon-group">
        <span class="iconfont">&#xe63e;</span>
        <div class="icon-group-child">
          <el-row>
            <el-col class="icon-one" :span="8" >
              <div>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-tupian2"></use>
                </svg>
                <div class="icon-title">图片</div>
              </div>
            </el-col>
            <el-col class="icon-one" :span="8">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-tupian-kuang"></use>
              </svg>
              <div class="icon-title">图片框</div>
            </el-col>
            <el-col class="icon-one" :span="8">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-lunbotu"></use>
              </svg>
              <div class="icon-title">轮播图</div>
            </el-col>
            <el-col class="icon-one" :span="8">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-iframe"></use>
              </svg>
              <div class="icon-title">外嵌网址</div>
            </el-col>
            <el-col class="icon-one" :span="8">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shipin1"></use>
              </svg>
              <div class="icon-title">视频</div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="icon-group">
        <span class="iconfont">&#xe640;</span>
        <div class="icon-group-child">
          <el-row>
            <el-col class="icon-one" :span="8" >
              <div>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-fanpaiqi"></use>
                </svg>
                <div class="icon-title">翻牌器</div>
              </div>
            </el-col>
            <el-col class="icon-one" :span="8">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-kuai"></use>
              </svg>
              <div class="icon-title">颜色块</div>
            </el-col>
            <el-col class="icon-one" :span="8">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jindutiao"></use>
              </svg>
              <div class="icon-title">进度条</div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="icon-group">
        <span class="iconfont">&#xe629;</span>
        <div class="icon-group-child">
          <el-row>
            <el-col class="icon-one" :span="8" >
              <div>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoge1"></use>
                </svg>
                <div class="icon-title">表格</div>
              </div>
            </el-col>
            <el-col class="icon-one" :span="8">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-tab"></use>
              </svg>
              <div class="icon-title">选项卡</div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="icon-group">
        <span class="iconfont">&#xe70d;</span>
      </div>
      <div class="icon-group">
        <span class="iconfont">&#xe858;</span>
      </div>
      <div class="icon-group">
        <span class="iconfont">&#xe7d9;</span>
      </div>
    </div>
    <div class="lAside">
    </div>
    <div class="main">
        <div class="canvas">
          <vue-draggable-resizable
            v-for="(item,index) in draggableList"
            :ref="index"
            :key="item.id"
            :x="item.x"
            :y="item.y"
            :w="item.w"
            :h="item.h"
            :min-width="item.minWidth"
            :min-height="item.minHeight"
            :parent="true"
            :snap="true"
            :snapTolerance="1"
            @refLineParams="getRefLineParams"
            @resizing="onResize"
            @dragging="onDrag"
          >
            <div @click="settingModule(item,index)">
              <div :ref="'charts'+index" :style="{width: item.w+'px',height: item.h+'px'}"></div>
            </div>
          </vue-draggable-resizable>
          <!--辅助线-->
          <span class="ref-line v-line"
                v-for="item in vLine"
                :key="item.id"
                v-show="item.display"
                :style="{ left: item.position, top: item.origin, height: item.lineLength}"
          />
          <span class="ref-line h-line"
                v-for="item in hLine"
                :key="item.id"
                v-show="item.display"
                :style="{ top: item.position, left: item.origin, width: item.lineLength}"
          />
          <!--辅助线END-->
        </div>
    </div>
    <div class="rAside"><PieChart :option="option"></PieChart></div>
  </div>
</template>

<script>
import VueDraggableResizable from '@/components/vue-draggable-resizable'
import PieChart from '@/views/PieChart/index'
import '@/components/vue-draggable-resizable.css'
import echarts from 'echarts'
import VueRulerTool from 'vue-ruler-tool'
export default {
  name: 'DragScreen',
  components: {
    VueDraggableResizable,
    VueRulerTool,
    PieChart
  },
  data () {
    return {
      headIconList:[],
      presetLine: [{ type: 'l', site: 100 }, { type: 'v', site: 200 }],
      vLine: [
        {
          display: true,
          position: 20,
          origin: 20,
          height: 20
        }
      ],
      hLine: [],
      draggable: {
        id: '',
        charts: '',
        minWidth: 100,
        minHeight: 100,
        x: 0,
        y: 0,
        w: 300,
        h: 300,
        option: {
          title: {
            text: '某站点用户访问来源',
            subtext: '纯属虚构',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['Apple', 'Grapes', 'Pineapples', 'Oranges', 'Bananas']
          },
          series: [{
            //图类型
            type: "pie",
            //是否启用图例 hover 时的联动高亮。
            legendHoverLink: true,
            // 是否开启 hover 在扇区上的放大动画效果。
            hoverAnimation: true,
            // 高亮扇区的偏移距离。
            hoverOffset: 10,
            //选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串
            //false,true,single,multiple
            selectedMode: true,
            //选中扇区偏移量
            selectedOffset: 10,
            //饼图的扇区是否是顺时针排布。
            clockwise: true,
            //其实展示饼图角度
            startAngle: 90,
            //最小扇区角度
            minAngle: 3,
            //是否展示成南丁格尔图，通过半径区分数据大小
            //'radius'，'area'
            // roseType: "radius",
            //避免标签重叠策略
            avoidLabelOverlap: false,
            //在数据为0时不显示扇区
            stillShowZeroSum:false,
            //鼠标悬浮式的样式
            //auto pointer move
            cursor: "pointer",
            //组件离容器左侧的距离。
            left: "0%",
            //组件离容器上侧的距离。
            top: "0%",
            //组件离容器右侧的距离。
            right: "0%",
            //组件离容器下侧的距离。
            bottom: "0%",
            //组件宽度
            width:'auto',
            //组件高度
            height: 'auto',
            //饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
            center: ["50%", "50%"],
            //内外半径
            radius: ["20%", "50%"],
            //是否不响应和触发鼠标事件
            silent: false,
            //初始化动画效果
            //默认false，scale,expansion
            animationType: false,
            // 更新数据时的动画效果，可选：
            // 'transition' 通过改变起始和终止角度，从之前的数据过渡到新的数据。
            // 'expansion' 数据将整体重新沿圆弧展开。
            animationTypeUpdate: "expansion",
            //是否开启动画
            animation:true,
            //初始化动画时长
            animationDuration: 1000,
            //初始化动画缓动效果linear，quadraticIn，quadraticOut，quadraticInOut，cubicIn，cubicOut，cubicInOut，quarticIn，quarticOut，quarticInOut，quinticIn，quinticOut，quinticInOut，sinusoidalIn，sinusoidalOut，sinusoidalInOut，exponentialIn，exponentialOut，exponentialInOut，circularIn，circularOut，circularInOut，elasticIn，elasticOut，elasticInOut，backIn，backOut，backInOut，bounceIn，bounceOut，bounceInOut
            animationEasing: "quinticInOut",
            //初始化动画延迟
            animationDelay:0,
            //更新动画时长
            animationDurationUpdate: 0,
            //更新动画缓动效果linear，quadraticIn，quadraticOut，quadraticInOut，cubicIn，cubicOut，cubicInOut，quarticIn，quarticOut，quarticInOut，quinticIn，quinticOut，quinticInOut，sinusoidalIn，sinusoidalOut，sinusoidalInOut，exponentialIn，exponentialOut，exponentialInOut，circularIn，circularOut，circularInOut，elasticIn，elasticOut，elasticInOut，backIn，backOut，backInOut，bounceIn，bounceOut，bounceInOut
            animationEasingUpdate: "quinticInOut",
            //更新动画延迟
            animationDelayUpdate:0,
            label: {
              // 是否显示
              show:true,
              // 位置'outside' 饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside'饼图扇区内部。'inner' 同 'inside'。'center'
              position:'outside',
              // 是否旋转：如果为 true，则为径向排布。如果为 number ，旋转指定角度，从 -90 度到 90 度。正值是逆时针。
              rotate:false,
              // 文本标签颜色
              // color: "#000000",
              // 文字风格'normal''italic''oblique'
              fontStyle: "normal",
              // 文字字体的粗细。'normal'bold''bolder''lighter'100 | 200 | 300 | 400|...
              fontWeight:'normal',
              // 文字的字体系列。还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
              fontFamily: "serif",
              // 文本大小
              fontSize: 12,
              // 文字水平对齐方式'left''center''right'
              align: "left",
              // 文字垂直对齐方式'top''middle''bottom'
              verticalAlign: "middle",
              // 行高
              lineHeight: 20,
              // 文字块背景颜色
              backgroundColor:'transparent',
              // 文字块边框颜色
              borderColor:'transparent',
              //文字块边框宽度
              borderWidth:0,
              //文字块的圆角。
              borderRadius:0,
              //文字块的内边距
              padding:0,
              //文字块的背景阴影颜色
              shadowColor:'transparent',
              //文字块的背景阴影长度
              shadowBlur:0,
              //文字块的背景阴影 X 偏移
              shadowOffsetX:0,
              //文字块的背景阴影 Y 偏移
              shadowOffsetY:0,
              //文字块的宽度
              width:'auto',
              //文字块的高度
              height:'auto',
              //文字本身的描边颜色
              textBorderColor:'transparent',
              // 文字本身的描边宽度。
              textBorderWidth:'0',
              // 文字本身的阴影颜色。
              textShadowColor:'transparent',
              // 文字本身的阴影长度。
              textShadowBlur:'0',
              // 文字本身的阴影 X 偏移。
              textShadowOffsetX:'0',
              // 文字本身的阴影 Y 偏移。
              textShadowOffsetY:'0',
              // 标签的对齐方式'none'（默认值）：label line 的长度为固定值，分别为 labelLine.length 及 labelLine.length2。'labelLine'：label line 的末端对齐，其中最短的长度由 labelLine.length2 决定。'edge'：文字对齐，文字的边距由 label.margin 决定。
              alignTo:'none',
              // 文字边距
              margin:'25%',
              // 文字的出血线大小
              bleedMargin:10,
              // 文字与 label line 之间的距离
              distanceToLabelLine:5,
            },
            data: [{
              value: 335,
              name: "Apple"
            }, {
              value: 310,
              name: "Grapes"
            }, {
              value: 234,
              name: "Pineapples"
            }, {
              value: 135,
              name: "Oranges"
            }, {
              value: 1548,
              name: "Bananas"
            }]
          }]
        }
      },
      draggableList: [
        {
          id: '123',
          charts: '',
          minWidth: 100,
          minHeight: 100,
          x: 0,
          y: 0,
          w: 300,
          h: 300,
          option: {
            title: {
              text: '某站点用户访问来源',
              subtext: '纯属虚构',
              left: 'center'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              data: ['Apple', 'Grapes', 'Pineapples', 'Oranges', 'Bananas']
            },
            series: [{
              //图类型
              type: "pie",
              //是否启用图例 hover 时的联动高亮。
              legendHoverLink: true,
              // 是否开启 hover 在扇区上的放大动画效果。
              hoverAnimation: true,
              // 高亮扇区的偏移距离。
              hoverOffset: 10,
              //选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串
              //false,true,single,multiple
              selectedMode: true,
              //选中扇区偏移量
              selectedOffset: 10,
              //饼图的扇区是否是顺时针排布。
              clockwise: true,
              //其实展示饼图角度
              startAngle: 90,
              //最小扇区角度
              minAngle: 3,
              //是否展示成南丁格尔图，通过半径区分数据大小
              //'radius'，'area'
              // roseType: "radius",
              //避免标签重叠策略
              avoidLabelOverlap: false,
              //在数据为0时不显示扇区
              stillShowZeroSum:false,
              //鼠标悬浮式的样式
              //auto pointer move
              cursor: "pointer",
              //组件离容器左侧的距离。
              left: "0%",
              //组件离容器上侧的距离。
              top: "0%",
              //组件离容器右侧的距离。
              right: "0%",
              //组件离容器下侧的距离。
              bottom: "0%",
              //组件宽度
              width:'auto',
              //组件高度
              height: 'auto',
              //饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
              center: ["50%", "50%"],
              //内外半径
              radius: ["20%", "50%"],
              //是否不响应和触发鼠标事件
              silent: false,
              //初始化动画效果
              //默认false，scale,expansion
              animationType: false,
              // 更新数据时的动画效果，可选：
              // 'transition' 通过改变起始和终止角度，从之前的数据过渡到新的数据。
              // 'expansion' 数据将整体重新沿圆弧展开。
              animationTypeUpdate: "expansion",
              //是否开启动画
              animation:true,
              //初始化动画时长
              animationDuration: 1000,
              //初始化动画缓动效果linear，quadraticIn，quadraticOut，quadraticInOut，cubicIn，cubicOut，cubicInOut，quarticIn，quarticOut，quarticInOut，quinticIn，quinticOut，quinticInOut，sinusoidalIn，sinusoidalOut，sinusoidalInOut，exponentialIn，exponentialOut，exponentialInOut，circularIn，circularOut，circularInOut，elasticIn，elasticOut，elasticInOut，backIn，backOut，backInOut，bounceIn，bounceOut，bounceInOut
              animationEasing: "quinticInOut",
              //初始化动画延迟
              animationDelay:0,
              //更新动画时长
              animationDurationUpdate: 0,
              //更新动画缓动效果linear，quadraticIn，quadraticOut，quadraticInOut，cubicIn，cubicOut，cubicInOut，quarticIn，quarticOut，quarticInOut，quinticIn，quinticOut，quinticInOut，sinusoidalIn，sinusoidalOut，sinusoidalInOut，exponentialIn，exponentialOut，exponentialInOut，circularIn，circularOut，circularInOut，elasticIn，elasticOut，elasticInOut，backIn，backOut，backInOut，bounceIn，bounceOut，bounceInOut
              animationEasingUpdate: "quinticInOut",
              //更新动画延迟
              animationDelayUpdate:0,
              label: {
                // 是否显示
                show:true,
                // 位置'outside' 饼图扇区外侧，通过视觉引导线连到相应的扇区。'inside'饼图扇区内部。'inner' 同 'inside'。'center'
                position:'outside',
                // 是否旋转：如果为 true，则为径向排布。如果为 number ，旋转指定角度，从 -90 度到 90 度。正值是逆时针。
                rotate:false,
                // 文本标签颜色
                // color: "#000000",
                // 文字风格'normal''italic''oblique'
                fontStyle: "normal",
                // 文字字体的粗细。'normal'bold''bolder''lighter'100 | 200 | 300 | 400|...
                fontWeight:'normal',
                // 文字的字体系列。还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
                fontFamily: "serif",
                // 文本大小
                fontSize: 12,
                // 文字水平对齐方式'left''center''right'
                align: "left",
                // 文字垂直对齐方式'top''middle''bottom'
                verticalAlign: "middle",
                // 行高
                lineHeight: 20,
                // 文字块背景颜色
                backgroundColor:'transparent',
                // 文字块边框颜色
                borderColor:'transparent',
                //文字块边框宽度
                borderWidth:0,
                //文字块的圆角。
                borderRadius:0,
                //文字块的内边距
                padding:0,
                //文字块的背景阴影颜色
                shadowColor:'transparent',
                //文字块的背景阴影长度
                shadowBlur:0,
                //文字块的背景阴影 X 偏移
                shadowOffsetX:0,
                //文字块的背景阴影 Y 偏移
                shadowOffsetY:0,
                //文字块的宽度
                width:'auto',
                //文字块的高度
                height:'auto',
                //文字本身的描边颜色
                textBorderColor:'transparent',
                // 文字本身的描边宽度。
                textBorderWidth:'0',
                // 文字本身的阴影颜色。
                textShadowColor:'transparent',
                // 文字本身的阴影长度。
                textShadowBlur:'0',
                // 文字本身的阴影 X 偏移。
                textShadowOffsetX:'0',
                // 文字本身的阴影 Y 偏移。
                textShadowOffsetY:'0',
                // 标签的对齐方式'none'（默认值）：label line 的长度为固定值，分别为 labelLine.length 及 labelLine.length2。'labelLine'：label line 的末端对齐，其中最短的长度由 labelLine.length2 决定。'edge'：文字对齐，文字的边距由 label.margin 决定。
                alignTo:'none',
                // 文字边距
                margin:'25%',
                // 文字的出血线大小
                bleedMargin:10,
                // 文字与 label line 之间的距离
                distanceToLabelLine:5,
              },
              data: [{
                value: 335,
                name: "Apple"
              }, {
                value: 310,
                name: "Grapes"
              }, {
                value: 234,
                name: "Pineapples"
              }, {
                value: 135,
                name: "Oranges"
              }, {
                value: 1548,
                name: "Bananas"
              }]
            }]
          }
        }
      ],
      option:undefined
    }
  },
  watch: {
    option: {
      handler: function (val, oldVal) {
          this.handlerDraw()
      },
      deep: true
    }
  },
  updated () {
    this.handlerDraw()
  },
  mounted () {
    this.handlerDraw()
  },
  methods: {
    settingModule (item,index) {
      this.option=item.option;
    },
    /**
     * 绘制
     */
    handlerDraw () {
      this.draggableList.forEach((e, i) => {
        e.charts = echarts.init(this.$refs['charts' + i][0])
        e.charts.setOption(e.option)
      })
    },
    /**
     * 获取复制线参数
     */
    getRefLineParams (params) {
      const { vLine, hLine } = params
      let id = 0
      this.vLine = vLine.map(item => {
        item['id'] = ++id
        return item
      })
      this.hLine = hLine.map(item => {
        item['id'] = ++id
        return item
      })
    },
    /**
     * 拖动回调
     */
    onDrag () {
      this.draggableList.forEach((e, i) => {
        e.x = this.$refs[i][0].left
        e.y = this.$refs[i][0].top
        this.$set(this.draggableList, i, e)
      })
    },
    /**
     * 调整尺寸回调
     */
    onResize () {
      this.draggableList.forEach((e, i) => {
        e.x = this.$refs[i][0].left
        e.y = this.$refs[i][0].top
        e.w = this.$refs[i][0].width
        e.h = this.$refs[i][0].height
        this.$set(this.draggableList, i, e)
        e.charts.resize()
      })
    },
    /**
     * 深克隆
     */
    deepClone (obj) {
      let result = typeof obj.splice === 'function' ? [] : {}
      if (obj && typeof obj === 'object') {
        for (let key in obj) {
          if (obj[key] && typeof obj[key] === 'object') {
            result[key] = this.deepClone(obj[key])
          } else {
            result[key] = obj[key]
          }
        }
        return result
      }
      return obj
    },
    /**
     * 添加模块
     */
    addModule () {
      this.draggable.id = this.getId(32)
      this.draggableList.push(this.deepClone(this.draggable))
    },
    /**
     * 获取多少位ID
     */
    getId (bit) {
      const chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']
      let nums = ''
      for (let i = 0; i < bit; i++) {
        var id = parseInt(Math.random() * 61)
        nums += chars[id]
      }
      return nums
    }
  }
}
</script>

<style scoped>
  .body{
    height: 100%;
    background: #ffffff;
    padding: 60px 260px 0 160px;
  }
  .canvas{
    height: 800px;
    width: 1200px;
    border: 1px solid #dddddd;
    position: relative;
    margin: 0 auto
  }
  .header,.lAside,.rAside,.main{
    position: fixed;
    /*background: #ffffff;*/
    background-color: #212528;
  }
  .main{
    overflow: auto;
    top: 60px;
    left: 160px;
    right: 260px;
    bottom: 10px;
  }
  .header{
    top: 0;
    left: 0;
    height: 60px;
    width: 100%;
    z-index: 1;
    box-shadow:0px 5px 4px #1d1d1d;
  }
  .lAside{
    overflow: auto;
    top: 60px;
    left: 0;
    width: 160px;
    height: 100%;
  }
  .rAside{
    overflow: auto;
    top: 60px;
    right: 0;
    width: 260px;
    height: 100%;
  }
  .icon {
    width: 40px;
    height: 40px;
    vertical-align: middle;
    fill: currentColor;
    overflow: hidden;
  }
  .iconfont{
    font-size: 28px;
    color: #999999;
  }
  .icon-group{
    position: relative;
    margin-left: 10px;
    width: 60px;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
    display: inline-block;
  }
  .icon-group:hover>.iconfont{
    color: #ffffff;
  }
  .icon-group:hover>.icon-group-child{
    display: inline-block;
  }
  .icon-group-child{
    position: absolute;
    top: 60px;
    left: 0;
    background: #2e3338;
    width: 360px;
    height: 300px;
    display: none;
  }
  .icon-title{
    line-height: 26px;
    font-size: 14px;
    color: #999999;
  }
  .icon-one{
    position: relative;
  }
  .icon-one:hover .icon{
    color: #ffffff;
    font-size: 20px;
    width: 50px;
    height: 50px;
  }
  .icon-one:hover .icon-title{
    color: #ffffff;
  }
</style>
